<template>
  <div class="dashboard-main">
    <el-row :gutter="30" style="margin: 30px auto">
      <el-col :span="8" :offset="0">
        <el-card shadow="always">
          <div slot="header">
            <span>用户数据</span>
          </div>
          <p>
            用户总量：
            <span style="color: skyblue">{{ baseData.userCount.count }}</span>
          </p>
          <p>
            今日增长：
            <span
              :style="{
                color: baseData.userCountToday.count > 0 ? 'red' : 'pink',
              }"
              >{{ baseData.userCountToday.count }}
            </span>
          </p>
        </el-card>
      </el-col>
      <el-col :span="8" :offset="0">
        <el-card shadow="always">
          <div slot="header">
            <span>图片数据</span>
          </div>
          <p>
            图片总量：
            <span style="color: skyblue">{{ baseData.imgCount.count }}</span>
          </p>
          <p>
            今日增长：
            <span
              :style="{
                color: baseData.userCountToday.count > 0 ? 'red' : 'pink',
              }"
              >{{ baseData.imgCountToday.count }}
            </span>
          </p>
        </el-card>
      </el-col>
      <el-col :span="8" :offset="0">
        <el-card shadow="always">
          <div slot="header">
            <span>文章数据</span>
          </div>
          <p>
            文章总量：
            <span style="color: skyblue">{{ baseData.newsCount.count }}</span>
          </p>
          <p>
            今日增长：<span
              :style="{
                color: baseData.userCountToday.count > 0 ? 'red' : 'pink',
              }"
              >{{ baseData.newsCountToday.count }}
            </span>
          </p>
        </el-card>
      </el-col>
    </el-row>

    <div class="charts">
      <!-- // 报表容器 -->
      <div id="echarts1"></div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { baseData as baseDataApi } from "@/api/dashboard/index";
var echarts = require("echarts");
export default {
  name: "Dashboard",
  data() {
    return {
      baseData: {
        userCount: { count: 0 },
        userCountToday: { count: 0 },
        userCountByDay: [],
        imgCount: { count: 0 },
        imgCountToday: { count: 0 },
        imgCountByDay: [],
        newsCount: { count: 0 },
        newsCountToday: { count: 0 },
        newsCountByDay: [],
      },
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById("echarts1"));
  },
  methods: {
    getBaseData() {
      baseDataApi().then((res) => {
        console.log(res);
        this.baseData = res;
        this.initUserEchart();
      });
    },
    initUserEchart() {
      var xData = [];
      var yData = {
        user: [],
        img: [],
        news: [],
      };
      for (var i = 0; i < this.baseData.userCountByDay.length; i++) {
        var item = this.baseData.userCountByDay[i];
        xData.push(item.date);
        yData.user.push(item.count);
      }
      for (var i = 0; i < this.baseData.imgCountByDay.length; i++) {
        var item = this.baseData.userCountByDay[i];
        yData.img.push(item.count);
      }
      for (var i = 0; i < this.baseData.newsCountByDay.length; i++) {
        var item = this.baseData.userCountByDay[i];
        yData.news.push(item.count);
      }
      console.log(xData, yData);
      this.myChart.setOption({
        title: {
          text: "用户量和其他数据增长对比",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["用户相关", "图片相关", "文章相关"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: xData,
            nameLocation: "start",
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "用户相关",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: yData.user,
          },
          {
            name: "图片相关",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: yData.img,
          },
          {
            name: "文章相关",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: yData.news,
          },
        ],
      });
      // 绑定事件
      this.myChart.on("click", function (params) {
        console.log(params);
      });
    },
  },
  created() {
    this.getBaseData();
  },
};
</script>

<style lang="scss" scoped>
.dashboard-main {
  .charts {
    // padding:0 50px;
    #echarts1 {
      width: 900px;
      height: 300px;
      margin: 30px auto;
    }
  }
}
</style>
